<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search">
      <image src="../../static/icon/grarysearch.png" mode="aspectFill" style="width: 40rpx; height: 40rpx; position: absolute; left: 50rpx"></image>
      <input type="text" placeholder="请输入学校名字" class="ipt" />
    </view>
    <!-- 联想列表 -->
    <view class="list">
      <view class="listitem" v-for="index in 4" :key="index">郑州市一中</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  .search {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 100%;
    height: 80rpx;
    margin: 30rpx;
    .ipt {
      box-sizing: border-box;
      font-size: 28rpx;
      background: #fafafa;
      padding-left: 80rpx;
      border-radius: 100rpx 100rpx 100rpx 100rpx;
      width: 690rpx;
      height: 80rpx;
    }
  }
  .list {
    box-sizing: border-box;
    margin: 30rpx;
    .listitem {
      width: 690rpx;
      height: 120rpx;
      line-height: 120rpx;
      border-bottom: 2rpx solid #f1f1f1;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }
}
</style>
